<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 清楚默认样式 */
        *{
            margin: 0;
            padding: 0;
        }
        
        div{
            width: 300px;
            height: 300px;
            background-color: pink;


            /* 边框线 取值：边框线的粗细  边框线的种类  边框线的颜色  */
            /* 边框线的种类 ： solid(实线)  dashed(虚线)  dotted(点线) */
            border: 1px solid #000;
            /* 边框单方向设置 可以几个方向一起写 */
            /* 只出现左边框：border-left: 1px solid #000; */
            /* 只出现有边框：border-right: 1px solid #000; */
            /* 只出现上边框：border-top: 1px solid #000; */
            /* 只出现下边框：border-bottom: 1px solid #000; */
            /* 注意点: border可以撑大盒子 */


            /* 内边距 ：出现内容盒盒子边缘之间  */
            padding: 20px;
            /* padding 取多值对应上、右、下、左 */
            /* padding: 10px 20px 30px 40px; */
            /* 自动内减，为了确定盒子的大小 */
            box-sizing:border-box;

            /* 外边距 ： 出现在两个盒子之间，出现在盒子外边*/
            margin: 50px;
            /* 外边距与内边距相似，以下为例 */
            /* margin-left: 50px; */
        }

    </style>
</head>
<body>
    <div>这是一个盒子模型</div>
</body>
</html>